<template>
  <div id='flow' style='height: 88vh'>
    <!-- <el-row style="margin-left:20px; margin-top:10px;">
      <h3>当前套餐：{{ dqtc }}</h3>
    </el-row> -->
    <el-row :span='24' style='margin-left:20px;margin-top:10px;'>
      <el-col :span='12'>
        <el-radio-group v-model='escalationData.target' @change='handleRadioChange'>
          <el-radio-button label='1'>长期磋商</el-radio-button>
          <el-radio-button label='2'>短期磋商</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row :span='24' style='padding: 10px'>
      <el-col :span='15' style='padding: 10px;'>
        <el-card style='height: 75vh'>
          <bpmn-modal ref='modal'  @call-parent-method='highlightSelectedProvinces'></bpmn-modal>
        </el-card>
      </el-col>
      <el-col :span='9' style='padding: 10px;'>
        <el-card>
          <div id='map_chart' style='height: 69.5vh'></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import bpmnModal from './bpmn/bpmnModal.vue'
import echarts from 'echarts'
import full100000 from '../panel/js/100000_full.json'

export default {
  name: 'bpmn',
  components: {
    bpmnModal
  },
  data() {
    return {
      isLoading: false,
      returnId: '',
      dqtc: '短期套餐',
      tableData: [],
      escalationData: {
        processId: '',
        target: '2'
      },
      dataset: {
        resource: {
          name: '资源接入量',
          data: [
            { 'name': '新疆维吾尔自治区', 'value': 0 },
            { 'name': '上海市', 'value': 0 },
            { 'name': '广东省', 'value': 0 },
            { 'name': '江苏省', 'value': 0 },
            { 'name': '北京市', 'value': 0 },
            { 'name': '天津市', 'value': 0 },
            { 'name': '浙江省', 'value': 0 },
            { 'name': '湖北省', 'value': 0 },
            { 'name': '山东省', 'value': 0 },
            { 'name': '福建省', 'value': 0 },
            { 'name': '湖南省', 'value': 0 },
            { 'name': '河南省', 'value': 0 },
            { 'name': '重庆市', 'value': 0 },
            { 'name': '四川省', 'value': 0 },
            { 'name': '陕西省', 'value': 0 },
            { 'name': '安徽省', 'value': 0 },
            { 'name': '河北省', 'value': 0 },
            { 'name': '辽宁省', 'value': 0 },
            { 'name': '山西省', 'value': 0 },
            { 'name': '吉林省', 'value': 0 },
            { 'name': '黑龙江省', 'value': 0 }
          ]
        }
      }
    }
  },
  mounted() {
    this.initXml()
    this.initMapChart()
  },
  methods: {
    initXml() {
      this.$refs.modal.import()
    },
    handleRadioChange(value) {
      debugger
      if ('1' === value) {
        this.$router.push({ name: 'negotiate_topo', params: null })
      }
    },
    initMapChart() {
      let _self = this
      // 画布初始化
      var chartDom = document.getElementById('map_chart')
      var myChart = echarts.init(chartDom)
      // 隐藏数据刷新动画
      // myChart.hideLoading();
      // 注册可用的地图
      echarts.registerMap('CN', full100000)
      let option = {
        title: {
          text: '接入区域分布',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 18
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'item',
          show: false,
          // 触发类型：数据项图形触发
          padding: 10,
          borderWidth: 1,
          borderColor: '#409eff',
          backgroundColor: 'rgba(184,178,178,0.4)',
          textStyle: {
            color: '#000000',
            fontSize: 12
          }
        },
        // 地理坐标系组件
        geo: {
          map: 'CN',
          zoom: 1.2,
          show: true,
          roam: false,
          emphasis: {
            label: {
              show: false
            }
          },
          layoutSize: '100%',
          itemStyle: {
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 2,
            shadowColor: 'rgb(90,160,234)',
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            shadowBlur: 10
          }
        },
        // 视觉映射组件（将数据映射到颜色等视觉元素）
        // visualMap: {
        //   type: 'piecewise', // 分段型
        //   min: 0, // 最小值
        //   max: 10000, // 最大值
        //   text: ['高', '低'], // 两端的文本
        //   splitNumber: 5, // 分段数量
        //   maxOpen: true, // 显示 >max 部分
        //   align: 'left', // 图形在左，文字在右
        //   showLabel: true, // 显示标注文字
        //   // orient: 'horizontal', // 水平摆放
        //   orient: 'vertical',
        //   inRange: {
        //     color: ['#8db1f1', '#026aa9']
        //   },
        //   textStyle: {
        //     color: '#0c0c0c',
        //     fontSize: 12,
        //     fontWeight: 400
        //   }
        // },
        series: [
          {
            type: 'map',
            map: 'CN',
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              show: true,
              color: '#535353'
            },
            itemStyle: {
              borderColor: 'rgba(147, 235, 248, 1)',
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(17,217,245,0.5)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(10,209,231,0.2)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              borderWidth: 1
            },
            emphasis: {
              label: {
                show: false,
                color: '#ffffff'
              },
              itemStyle: {
                areaColor: '#026aa9',
                borderColor: '#ffffff',
                borderWidth: 2
              }
            },
            data: this.dataset.resource.data
          }
        ]
      }
      myChart.setOption(option)

      // 高亮多个省份
      // this.highlightProvinces(myChart, ['北京市', '辽宁省'])

      // 点击右侧加载省份
      myChart.on('click', function(params) {
        _self.loading1 = true
        // 华北大区
        let _data = [
          {
            regionName: '华北大区',
            list: ['北京市', '天津', '山西', '河北', '山东', '内蒙古']
          }, {
            regionName: '东北大区',
            list: ['黑龙江', '吉林', '辽宁省']
          }, {
            regionName: '华东大区',
            list: ['江苏', '浙江', '上海', '安徽']
          }, {
            regionName: '华南大区',
            list: ['广东', '广西', '海南', '福建']
          }, {
            regionName: '华中大区',
            list: ['河南', '湖北', '湖南', '江西']
          }, {
            regionName: '西北大区',
            list: ['陕西', '甘肃', '青海', '宁夏', '新疆']
          }, {
            regionName: '西南大区',
            list: ['云南', '贵州', '四川', '西藏', '重庆']
          }, {
            regionName: '中国港澳台',
            list: ['台湾', '香港', '澳门']
          }
        ]
        console.log(params.name)
        // params.name 为省份名称 下面通过data数组 输入省份返回区域名称
        var regionName = _data.find(region => region.list.some(province => params.name.includes(province))).regionName
        console.log(regionName)

        setTimeout(function() {
          _self.tableData1[0].prop1 = '阿里云-' + regionName
          _self.tableData1[1].prop1 = '腾讯云-' + regionName
          _self.tableData1[2].prop1 = '华为云-' + regionName
          _self.tableData1[3].prop1 = '联通云-' + regionName
          _self.tableData1[4].prop1 = '火山云-' + regionName
          _self.loading1 = false
        }, 1000)
      })
    },
    highlightProvinces(chart, provinces) {
      provinces.forEach(province => {
        chart.dispatchAction({
          type: 'highlight',
          name: province
        })
      })
    },
    clearHighlight(chart) {
      chart.dispatchAction({
        type: 'downplay',
        // 使用 name: 'all' 可能无法清除所有高亮状态，改为遍历所有省份进行清除
        name: 'all'
      })
      // 遍历所有省份进行清除
      const allProvinces = [
        '北京市', '天津市', '山西省', '河北省', '山东省', '内蒙古自治区',
        '黑龙江省', '吉林省', '辽宁省',
        '江苏省', '浙江省', '上海市', '安徽省',
        '广东省', '广西省', '海南省', '福建省',
        '河南省', '湖北省', '湖南省', '江西省',
        '陕西省', '甘肃省', '青海省', '宁夏省', '新疆维吾尔自治区',
        '云南省', '贵州省', '四川省', '西藏自治区', '重庆市',
        '台湾省', '香港', '澳门'
      ]
      allProvinces.forEach(province => {
        chart.dispatchAction({
          type: 'downplay',
          name: province
        })
      })
    },
    highlightSelectedProvinces(node) {
      let dq = [
        {
          nodeName: 'LoadVideo',
          regionName: '华北大区',
          list: ['北京市', '天津市', '山西省', '河北省', '山东省', '内蒙古自治区']
        }, {
          nodeName: 'Prompt words',
          regionName: '东北大区',
          list: ['黑龙江省', '吉林省', '辽宁省']
        }, {
          nodeName: 'Negative Prompt word',
          regionName: '华东大区',
          list: ['江苏省', '浙江省', '上海市', '安徽省']
        }, {
          nodeName: 'Batch Prompt Schedule',
          regionName: '华南大区',
          list: ['广东省', '广西省', '海南省', '福建省']
        }, {
          nodeName: 'Examine & Verify',
          regionName: '华中大区',
          list: ['河南省', '湖北省', '湖南省', '江西省']
        }, {
          nodeName: 'Load Model',
          regionName: '西北大区',
          list: ['陕西省', '甘肃省', '青海省', '宁夏省', '新疆维吾尔自治区']
        }, {
          nodeName: 'Image Resize',
          regionName: '西南大区',
          list: ['云南省', '贵州省', '四川省', '西藏自治区', '重庆市']
        }, {
          nodeName: 'Transcoding',
          regionName: '中国港澳台',
          list: ['台湾省', '香港', '澳门']
        },
        {
          nodeName: 'Empty Latent Image',
          regionName: '西南大区',
          list: ['云南省', '贵州省', '四川省', '西藏自治区', '重庆市']
        },
        {
          nodeName: 'Apply Controlnet',
          regionName: '华东大区',
          list: ['江苏省', '浙江省', '上海市', '安徽省']
        },
        {
          nodeName: 'VAE Decode',
          regionName: '东北大区',
          list: ['黑龙江省', '吉林省', '辽宁省']
        },
        {
          nodeName: 'Save Image',
          regionName: '东北大区',
          list: ['黑龙江省', '吉林省', '辽宁省']
        },
        {
          nodeName: 'Video Combine',
          regionName: '华北大区',
          list: ['北京市', '天津市', '山西省', '河北省', '山东省', '内蒙古自治区']
        }
      ]
      // 根据传入的 node 参数匹配 dq 数组中的 nodeName
      const matchedNode = dq.find(item => item.nodeName === node)

      // 如果找到匹配的 nodeName，则使用对应的 list 作为 provincesToHighlight 的值
      const provincesToHighlight = matchedNode ? matchedNode.list : []
      const chart = echarts.getInstanceByDom(document.getElementById('map_chart'))
      this.clearHighlight(chart)
      this.highlightProvinces(chart, provincesToHighlight)
    }
  }
}
</script>
